// 提供全局注册的模块
import { App } from 'vue'
import XtxSkeleton from './skeleton/index.vue'
import XtxCarousel from './carousel/index.vue'
import Xtxmore from './more/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
import Bread from './Bread/index.vue'
import BreadItem from './Bread/Item.vue'
import XtxCity from '@/components/city/index.vue'
import XtxNumbox from '@/components/numberBox/index.vue'
import XtxButton from '@/components/button/index.vue'
import XtxCheckbox from '@/components/checkbox/index.vue'
import XtxMessage from '@/components/message/index.vue'
export default {
  // App 类型是vue实例提供的实例类型
  install(app: App) {
    app.component(XtxSkeleton.name, XtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
    app.component(Xtxmore.name, Xtxmore)
    // 自定义图片懒加载指令
    app.directive('lazy', {
      mounted(el, { value }) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // 达到区域后赋值src 发送请求
          if (isIntersecting) {
            el.src = value
            // 监听图片错误事件 给默认图片
            el.onerror = () => {
              el.src = defaultImg
            }
            // 加载完成后就停止事件
            stop()
          }
        },
        {
          // 参数三 临界值0-1 默认0.x 0表示看到立即执行赋值 1表示完整看到再赋值
          threshold:0
         })
      },
    })
    app.component(Bread.name, Bread)
    app.component(BreadItem.name, BreadItem)
    app.component(XtxCity.name, XtxCity)
    app.component(XtxNumbox.name, XtxNumbox)
    app.component(XtxButton.name, XtxButton)
    app.component(XtxCheckbox.name, XtxCheckbox)
    app.component(XtxMessage.name, XtxMessage)
  },
}
